import React, { useState, useEffect } from 'react';
import styles from './style.less';

interface GuassBoxProps {
  bgUrl: string;
  children: any;
}

const GuassBox: React.FC<GuassBoxProps> = ({ bgUrl, children }) => {
  const [bgVisible, setBgVisible] = useState(false);

  useEffect(() => {
    setBgVisible(false);
  }, [bgUrl]);

  return (
    <div className={styles.guassbox}>
      <img
        src={bgUrl}
        className={styles.bg}
        onLoad={() => setBgVisible(true)}
      />
      <div className={styles.mask} style={{ opacity: bgVisible ? 0 : 1 }} />
      <div  className={styles.content}>{children}</div>
    </div>
  );
};

export default GuassBox;
